<script setup lang="ts">
import {ref} from 'vue'

// 定义卡片数据（响应式数组）
const cardList = ref([
  {
    imgUrl: '', // 图片地址（为空时显示 alt）
    imgAlt: '暂无图片',
    title: '标题一',
    content: '这是第一组内容',
    buttonText: '按钮1'
  },
  {
    imgUrl: 'https://picsum.photos/id/48/300/200',
    imgAlt: '暂无图片',
    title: '标题二',
    content: '这是第二组内容',
    buttonText: '按钮2'
  },
  {
    imgUrl: 'https://picsum.photos/id/48/300/200',
    imgAlt: '暂无图片',
    title: '标题二',
    content: '这是第二组内容',
    buttonText: '按钮2'
  },
  {
    imgUrl: 'https://picsum.photos/id/48/300/200',
    imgAlt: '暂无图片',
    title: '标题二',
    content: '这是第二组内容',
    buttonText: '按钮2'
  },
  {
    imgUrl: 'https://picsum.photos/id/48/300/200',
    imgAlt: '暂无图片',
    title: '标题二',
    content: '这是第二组内容',
    buttonText: '按钮2'
  },
  {
    imgUrl: 'https://picsum.photos/id/48/300/200',
    imgAlt: '暂无图片',
    title: '标题二',
    content: '这是第二组内容',
    buttonText: '按钮2'
  },
  {
    imgUrl: 'https://picsum.photos/id/48/300/200',
    imgAlt: '暂无图片',
    title: '标题二',
    content: '这是第二组内容',
    buttonText: '按钮2'
  },
  {
    imgUrl: 'https://picsum.photos/id/48/300/200',
    imgAlt: '暂无图片',
    title: '标题二',
    content: '这是第二组内容',
    buttonText: '按钮2'
  },
  {
    imgUrl: 'https://picsum.photos/id/48/300/200',
    imgAlt: '暂无图片',
    title: '标题二',
    content: '这是第二组内容',
    buttonText: '按钮2'
  },
  {
    imgUrl: 'https://picsum.photos/id/48/300/200',
    imgAlt: '暂无图片',
    title: '标题二',
    content: '这是第二组内容',
    buttonText: '按钮2'
  },
  {
    imgUrl: 'https://picsum.photos/id/48/300/200',
    imgAlt: '暂无图片',
    title: '标题二',
    content: '这是第二组内容',
    buttonText: '按钮2'
  },
  {
    imgUrl: '',
    imgAlt: '暂无图片',
    title: '标题三',
    content: '这是第三组内容',
    buttonText: '按钮3'
  }
  // 可以继续添加更多卡片...
])
</script>

<template>


  <!-- Grid 容器：自适应列数，卡片最小宽 159px，间距 8px -->
  <div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-2 p-2">
    <!-- 循环生成卡片 -->
    <div v-for="(card, index) in cardList" :key="index" class="bg-fuchsia-100 p-2">
      <div style="height: 150px; width: 220px; margin: 0 auto;background-color: #99a9bf">
        <img :src="card.imgUrl" :alt="card.imgAlt" style="width: 100%; height: 100%; object-fit: contain;">
      </div>
      <h2 class="text-sm font-medium mt-2">{{ card.title }}</h2>
      <p class="text-xs text-gray-600 mt-1">{{ card.content }}</p>
      <div class="text-xs bg-blue-100 text-blue-800 px-2 py-1 mt-2 inline-block rounded">
        {{ card.buttonText }}
      </div>
    </div>
  </div>


</template>

<style scoped>

</style>